/*
 * @Author: xiaosihan 
 * @Date: 2024-09-12 22:28:34 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-23 00:05:58
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./projectCollaboration.module.less";
import PCHeader from "../PCHeader/PCHeader";
import { Button, Pagination, Spin, Table, Tabs } from "antd";
import projectCollaborationStore from "./projectCollaborationStore";
import Project from "./Project/Project";
import AddProject from "./Project/AddProject";
import hashHistory from "@hashHistory";
import allfileiconPNG from "./allfileicon.png";

interface Iprops {
    children?: ReactNode
}

//项目管理
export default function ProjectCollaboration() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [isAdd, setIsAdd] = useState(projectCollaborationStore.isAdd);
    const [page, setPage] = useState(projectCollaborationStore.page);
    const [pageSize, setPageSize] = useState(projectCollaborationStore.pageSize);
    const [status, setStatus] = useState(projectCollaborationStore.status);
    const [total, setTotal] = useState(projectCollaborationStore.total);
    const [list, setList] = useState(projectCollaborationStore.list);
    const [loading, setLoading] = useState(projectCollaborationStore.loading);


    useEffect(() => {
        projectCollaborationStore.getList();
    }, []);

    useEffect(() => autorun(() => {
        setIsAdd(projectCollaborationStore.isAdd);
        setStatus(projectCollaborationStore.status);
        setPage(projectCollaborationStore.page);
        setPageSize(projectCollaborationStore.pageSize);
        setTotal(projectCollaborationStore.total);
        setList(projectCollaborationStore.list);
        setLoading(projectCollaborationStore.loading);
    }), []);

    return (
        <div className={styles.projectCollaboration} >
            <PCHeader />
            <div className={styles.title} >项目管理</div>
            <Spin
                spinning={loading}
            >
                <div className={styles.projectList} >
                    <div className={styles.header} >
                        <Tabs
                            activeKey={String(status)}
                            className={styles.tabs}
                            items={[{ key: '0', label: '进行中', }, { key: '1', label: '已完成', }]}
                            onChange={(v: any) => {
                                projectCollaborationStore.setStatus(v);
                            }}
                        />
                        {
                            (status == 0) &&
                            <Button
                                type="primary"
                                size="small"
                                className={styles.createProject}
                                disabled={isAdd}
                                onClick={() => {
                                    projectCollaborationStore.setIsAdd(true);
                                }}
                            >创建项目</Button>
                        }
                        <span
                            className={styles.all_file}
                            onClick={() => {
                                hashHistory.push("/partsLibrary")
                            }}
                        >
                            <img
                                alt=""
                                className={styles.icon}
                                src={allfileiconPNG}
                            />
                            所有文件
                        </span>
                    </div>
                    {isAdd && <AddProject />}
                    {
                        (isAdd ? list.slice(0, 11) : list).map((item, index) => {
                            return (
                                <Project key={index} {...item} />
                            )
                        })
                    }
                </div>
            </Spin>
            <div className={styles.pagination} >
                <Pagination
                    current={page}
                    pageSize={pageSize}
                    total={total}
                    onChange={(page) => {
                        projectCollaborationStore.getList(page);
                    }}
                />
            </div>
        </div>
    );

}